<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.0.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yoursite.com","root":"/","scheme":"Mist","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":true},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="之前搭建Hexo的时候也有借用一些插件实现图片懒加载以及图片压缩的功能优化了一下，不过最近刚好了解了下HTTP2,就想着从网络协议层面优化看看。">
<meta property="og:type" content="article">
<meta property="og:title" content="博客优化记录">
<meta property="og:url" content="http://yoursite.com/2020/03/02/%E5%8D%9A%E5%AE%A2%E4%BC%98%E5%8C%96%E8%AE%B0%E5%BD%95/index.html">
<meta property="og:site_name" content="FU">
<meta property="og:description" content="之前搭建Hexo的时候也有借用一些插件实现图片懒加载以及图片压缩的功能优化了一下，不过最近刚好了解了下HTTP2,就想着从网络协议层面优化看看。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://oss.chenjunxin.com/picture/blogPicture/87e6cb09_HTTP1.X_Compare_HTTP2.webp">
<meta property="og:image" content="https://oss.chenjunxin.com/picture/blogPicture/87e6cb09_CAA_Setting.webp">
<meta property="og:image" content="https://oss.chenjunxin.com/picture/blogPicture/87e6cb09_CAA_Result.webp">
<meta property="og:image" content="https://oss.chenjunxin.com/picture/blogPicture/87e6cb09_HTTP1.1_Compare_HTTP2_Network.webp">
<meta property="og:image" content="https://oss.chenjunxin.com/picture/blogPicture/87e6cb09_HTTP1.1_Compare_HTTP2_Fact.webp">
<meta property="article:published_time" content="2020-03-02T05:21:33.000Z">
<meta property="article:modified_time" content="2020-08-02T11:49:36.759Z">
<meta property="article:author" content="fu">
<meta property="article:tag" content="博客优化">
<meta property="article:tag" content="HTTP2">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://oss.chenjunxin.com/picture/blogPicture/87e6cb09_HTTP1.X_Compare_HTTP2.webp">

<link rel="canonical" href="http://yoursite.com/2020/03/02/%E5%8D%9A%E5%AE%A2%E4%BC%98%E5%8C%96%E8%AE%B0%E5%BD%95/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>博客优化记录 | FU</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">FU</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="th fa-fw"></i>分类</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/03/02/%E5%8D%9A%E5%AE%A2%E4%BC%98%E5%8C%96%E8%AE%B0%E5%BD%95/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="fu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="FU">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          博客优化记录
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-03-02 13:21:33" itemprop="dateCreated datePublished" datetime="2020-03-02T13:21:33+08:00">2020-03-02</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-08-02 19:49:36" itemprop="dateModified" datetime="2020-08-02T19:49:36+08:00">2020-08-02</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">技术</span></a>
                </span>
                  ，
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E6%8A%80%E6%9C%AF/%E5%8D%9A%E5%AE%A2%E4%BC%98%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">博客优化</span></a>
                </span>
            </span>

          
            <div class="post-description">之前搭建Hexo的时候也有借用一些插件实现图片懒加载以及图片压缩的功能优化了一下，不过最近刚好了解了下HTTP2,就想着从网络协议层面优化看看。</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="HTTP-协议"><a href="#HTTP-协议" class="headerlink" title="HTTP 协议"></a>HTTP 协议</h1><p>HTTP 协议是 HyperText Transfer Protocol（超文本传输协议）的缩写，它是互联网上应用最为广泛的一种网络协议。所有的 WWW 文件都必须遵守这个标准。</p>
<h1 id="HTTP的基本优化"><a href="#HTTP的基本优化" class="headerlink" title="HTTP的基本优化"></a>HTTP的基本优化</h1><p>影响一个 HTTP 网络请求的因素主要有两个：<strong>带宽和延迟</strong>。</p>
<ul>
<li><strong>带宽</strong>：如果说我们还停留在拨号上网的阶段，带宽可能会成为一个比较严重影响请求的问题，但是现在网络基础建设已经使得带宽得到极大的提升，我们不再会担心由带宽而影响网速，那么就只剩下延迟了。</li>
<li><strong>延迟</strong>：<ul>
<li>浏览器阻塞（HOL blocking）：浏览器会因为一些原因阻塞请求。浏览器对于同一个域名，同时只能有 4 个连接（这个根据浏览器内核不同可能会有所差异），超过浏览器最大连接数限制，后续请求就会被阻塞。</li>
<li>DNS 查询（DNS Lookup）：浏览器需要知道目标服务器的 IP 才能建立连接。将域名解析为 IP 的这个系统就是 DNS。这个通常可以利用DNS缓存结果来达到减少这个时间的目的。</li>
<li>建立连接（Initial connection）：HTTP 是基于 TCP 协议的，浏览器最快也要在第三次握手时才能捎带 HTTP 请求报文，达到真正的建立连接，但是这些连接无法复用会导致每次请求都经历三次握手和慢启动。三次握手在高延迟的场景下影响较明显，慢启动则对大量小文件请求影响较大（没有达到最大窗口请求就被终止）。</li>
</ul>
</li>
</ul>
<h1 id="HTTP-1-x-的缺陷"><a href="#HTTP-1-x-的缺陷" class="headerlink" title="HTTP/1.x 的缺陷"></a>HTTP/1.x 的缺陷</h1><ol>
<li>连接无法复用：连接无法复用会导致每次请求都经历三次握手和慢启动。三次握手在高延迟的场景下影响较明显，慢启动则对大量小文件请求影响较大（没有达到最大窗口请求就被终止）。</li>
</ol>
<ul>
<li>HTTP/1.0 传输数据时，每次都需要重新建立连接，增加延迟。</li>
<li>HTTP/1.1 虽然加入 keep-alive 可以复用一部分连接，但<strong>域名分片</strong>(浏览器或者客户端是根据域名来建立连接的。比如针对Example Domain只允许同时建立2个连接，但mobile.example.com被认为是另一个域名，可以再建立两个新的连接。依次类推，如果我再多建立几个sub domain（子域名），那么同时可以建立的http请求就会更多，这就是域名分片了。连接数变多之后，受限制的请求就不需要等待前面的请求完成才能发出了。这个技巧被大量的使用，一个颇具规模的网页请求数可以超过100，使用域名分片之后同时建立的连接数可以多到50个甚至更多)等情况下仍然需要建立多个 connection，耗费资源，给服务器带来性能压力。</li>
</ul>
<ol start="2">
<li>Head-Of-Line Blocking（HOLB）：导致带宽无法被充分利用，以及后续健康请求被阻塞。HOLB是指一系列包（package）因为第一个包被阻塞；当页面中需要请求很多资源的时候，HOLB（队头阻塞）会导致在达到最大请求数量时，剩余的资源需要等待其他资源请求完成后才能发起请求。</li>
</ol>
<ul>
<li>HTTP 1.0：下个请求必须在前一个请求返回后才能发出，request-response对按序发生。显然，如果某个请求长时间没有返回，那么接下来的请求就全部阻塞了。</li>
<li>HTTP 1.1：尝试使用 pipeling 来解决，即浏览器可以一次性发出多个请求（同个域名，同一条 TCP 链接）。但 pipeling 要求返回是按序的，那么前一个请求如果很耗时（比如处理大图片）。</li>
</ul>
<ol start="3">
<li>协议开销大： HTTP1.x 在使用时，header 里携带的内容过大，在一定程度上增加了传输的成本，并且每次请求 header 基本不怎么变化，尤其在移动端增加用户流量。</li>
<li>安全因素：HTTP1.x 在传输数据时，所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份，这在一定程度上无法保证数据的安全性。</li>
</ol>
<h1 id="HTTP-2-简介"><a href="#HTTP-2-简介" class="headerlink" title="HTTP/2 简介"></a>HTTP/2 简介</h1><p>2015 年，HTTP/2 发布。HTTP/2 是现行 HTTP 协议（HTTP/1.x）的替代，但它不是重写，HTTP 方法/状态码/语义都与 HTTP/1.x 一样。HTTP/2 基于 SPDY3，专注于性能，最大的一个目标是在用户和网站间只用一个连接（connection）。HTTP2.0 支持明文 HTTP 传输。</p>
<h1 id="HTTP2-0和HTTP1-X相比的新特性"><a href="#HTTP2-0和HTTP1-X相比的新特性" class="headerlink" title="HTTP2.0和HTTP1.X相比的新特性"></a>HTTP2.0和HTTP1.X相比的新特性</h1><p><img src="https://oss.chenjunxin.com/picture/blogPicture/87e6cb09_HTTP1.X_Compare_HTTP2.webp"></p>
<ul>
<li>新的二进制格式（Binary Format），HTTP1.x的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认0和1的组合。基于这种考虑HTTP2.0的协议解析决定采用二进制格式，实现方便且健壮。</li>
<li>多路复用（MultiPlexing），即连接共享，即每一个request都是是用作连接共享机制的。一个request对应一个id，这样一个连接上可以有多个request，每个连接的request可以随机的混杂在一起，接收方可以根据request的 id将request再归属到各自不同的服务端请求里面。可以通过<a target="_blank" rel="noopener" href="https://http2.akamai.com/demo">链接</a>直观感受下 HTTP/2 比 HTTP/1 到底快了多少。</li>
<li>header压缩，如上文中所言，对前面提到过HTTP1.x的header带有大量信息，而且每次都要重复发送，HTTP2.0使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表，对于相同的数据,不再通过每次请求和响应发送,既避免了重复header的传输，又减小了需要传输的大小。</li>
<li>服务端推送（server push），即服务端能通过 push 的方式将客户端需要的内容预先推送过去，也叫“cache push”。可以想象以下情况，某些资源客户端是一定会请求的，这时就可以采取服务端 push 的技术，提前给客户端推送必要的资源，这样就可以相对减少一点延迟时间。例如服务端可以主动把 JS 和 CSS 文件推送给客户端，而不需要客户端解析 HTML 时再发送这些请求。服务端可以主动推送，客户端也有权利选择是否接收。如果服务端推送的资源已经被浏览器缓存过，浏览器可以通过发送 RST_STREAM 帧来拒收。主动推送也遵守同源策略，换句话说，服务器不能随便将第三方资源推送给客户端，而必须是经过双方确认才行。</li>
</ul>
<h1 id="HTTP2的升级改造"><a href="#HTTP2的升级改造" class="headerlink" title="HTTP2的升级改造"></a>HTTP2的升级改造</h1><ul>
<li>HTTP2.0其实可以支持非HTTPS的，但是现在主流的浏览器像chrome，firefox表示还是只支持基于 TLS 部署的HTTP2.0协议，所以要想升级成HTTP2.0还是先升级HTTPS为好。</li>
<li>当你的网站已经升级HTTPS之后，那么升级HTTP2.0就简单很多，如果你使用NGINX，只要在配置文件中启动相应的协议就可以了。</li>
<li>使用了HTTP2.0那么，原本的HTTP1.x怎么办，这个问题其实不用担心，HTTP2.0完全兼容HTTP1.x的语义，对于不支持HTTP2.0的浏览器，NGINX会自动向下兼容的。</li>
</ul>
<h2 id="获取SSL证书"><a href="#获取SSL证书" class="headerlink" title="获取SSL证书"></a>获取SSL证书</h2><p>参考<a target="_blank" rel="noopener" href="https://www.toolmao.com/get-free-ssl">这篇文章</a>里的方式获取免费的SSL证书，然后再配置域名解析HTTPS，还要在服务器的Nginx上配置我是用了阿里云的一年免费的那个。</p>
<h2 id="给域名添加DNS-CAA记录"><a href="#给域名添加DNS-CAA记录" class="headerlink" title="给域名添加DNS CAA记录"></a>给域名添加DNS CAA记录</h2><h3 id="什么是CAA"><a href="#什么是CAA" class="headerlink" title="什么是CAA"></a>什么是CAA</h3><p><a target="_blank" rel="noopener" href="https://zh.wikipedia.org/wiki/DNS%E8%AF%81%E4%B9%A6%E9%A2%81%E5%8F%91%E6%9C%BA%E6%9E%84%E6%8E%88%E6%9D%83">DNS Certification Authority Authorization</a>（DNS证书颁发机构授权，简称 CAA）是一项借助互联网的域名系统（DNS），使域持有人可以指定允许为其域签发证书的数字证书认证机构（CA）的技术。它会在 DNS 下发 IP 的同时，同时下发一条资源记录，标记该域名下使用的证书必须由某证书颁发机构颁发。由于一个域名可以在很多家数字证书厂商CA申请SSL证书，如果域名被劫持很有可能在域名持有者不知情的情况下申请一张受浏览器信任的证书。同时对于CA来说，如果某个域名已经制定了哪家CA给自己颁发ssl证书，那么其他家就无法给这个域名颁发证书了，这样可以有效保护SSL证书的随意申请和滥用。<br>简单地说，就是当域名的 DNS 解析存在 CAA 记录时，则只允许在记录中列出的 CA 机构颁发针对该域名(或子域名)的证书。CAA 记录可以控制单域名 SS L证书的发行，也可以控制通配符证书。<br>所以设置了 CAA，如果有一天想更换非 CAA 记录中的 CA，要记得把 DNS CAA 的解析记录消掉。否则颁发会失败。</p>
<h3 id="在域名的DNS添加CAA"><a href="#在域名的DNS添加CAA" class="headerlink" title="在域名的DNS添加CAA"></a>在域名的DNS添加CAA</h3><p>目前国内的云服务中，阿里云支持 CAA 的 DNS 解析，因为本人用的阿里云，所以其它云服务产商不太了解，在 DNS 解析处看看就知道支持不支持了，如果不支持想添加的话也可以换用支持的 DNS 服务商来解决。打开阿里云控制面板，找到要解析的域名，然后点击“解析”，具体如下图：<br><img src="https://oss.chenjunxin.com/picture/blogPicture/87e6cb09_CAA_Setting.webp"><br>关于记录值，可以使用<a target="_blank" rel="noopener" href="https://sslmate.com/caa/">CAA Record Helper</a> 来自动生成。将生成的记录值（比如<code>0 issue &quot;chenjunxin.com&quot;</code>这样的）填入到 DNS 解析中。<br>成功添加CAA记录后，可以通过<a target="_blank" rel="noopener" href="https://www.ssllabs.com/ssltest/analyze.html?d=chenjunxin.com">sslab</a>扫描，开启成功后检查结果如下：<br><img src="https://oss.chenjunxin.com/picture/blogPicture/87e6cb09_CAA_Result.webp"></p>
<h2 id="Nginx上配置HTTP2"><a href="#Nginx上配置HTTP2" class="headerlink" title="Nginx上配置HTTP2"></a>Nginx上配置HTTP2</h2><p>这里很简单，在已经配置好的HTTPS 443端口监听的后面添加<code>http2</code>就可以了，如下：</p>
<figure class="highlight diff"><figcaption><span>nginx.conf</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">server &#123;</span><br><span class="line"><span class="deletion">-    listen 443 ssl;</span></span><br><span class="line"><span class="addition">+    listen 443 ssl http2;</span></span><br><span class="line">    server_name  localhost;</span><br><span class="line">    ssl                      on;</span><br><span class="line">    ssl_certificate         /etc/nginx/certs/example.crt;</span><br><span class="line">    ssl_certificate_key     /etc/nginx/certs/example.key;</span><br><span class="line">    ssl_session_timeout  5m;</span><br><span class="line">    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;</span><br><span class="line">    ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;</span><br><span class="line">    ssl_prefer_server_ciphers   on;</span><br><span class="line">    location / &#123;</span><br><span class="line">        root   /usr/share/nginx/html;</span><br><span class="line">        index  index.html index.htm;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="效果对比"><a href="#效果对比" class="headerlink" title="效果对比"></a>效果对比</h2><p>然后我们先看一下传输的流量节省了多少，如下图所示，加载一个页面：<br><img src="https://oss.chenjunxin.com/picture/blogPicture/87e6cb09_HTTP1.1_Compare_HTTP2_Network.webp"><br>可以看到，HTTP 2在流量方面并没有太大的改进，只减少了4kB（1%）的流量，下面我们再分析原因。HTTP 2的优势还在于它的多路复用等方面。<br>使用Chrome浏览器开发者工具的Audits功能给网页进行评分的对比，左边是没有开启HTTP2的结果，评分之后有提示可以开启HTTP2进行优化:<br><img src="https://oss.chenjunxin.com/picture/blogPicture/87e6cb09_HTTP1.1_Compare_HTTP2_Fact.webp"></p>
<h2 id="其他优化"><a href="#其他优化" class="headerlink" title="其他优化"></a>其他优化</h2><h3 id="Nginx-开启-GZIP"><a href="#Nginx-开启-GZIP" class="headerlink" title="Nginx 开启 GZIP"></a>Nginx 开启 GZIP</h3><p>GZIP 能有效减少网络传输消耗，开启以后会占用一点服务器的 CPU，对前端网页性能提升有一些帮助。例如:</p>
<figure class="highlight diff"><figcaption><span>nginx.conf</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">http &#123;</span><br><span class="line">    include            mime.types;</span><br><span class="line">    default_type       application/octet-stream;</span><br><span class="line"></span><br><span class="line">    charset            UTF-8;</span><br><span class="line"></span><br><span class="line">    sendfile           on;</span><br><span class="line">    tcp_nopush         on;</span><br><span class="line">    tcp_nodelay        on;</span><br><span class="line"></span><br><span class="line">    keepalive_timeout  60;</span><br><span class="line"></span><br><span class="line">    #... ...#</span><br><span class="line"></span><br><span class="line">    gzip               on;</span><br><span class="line">    gzip_vary          on;</span><br><span class="line"></span><br><span class="line">    gzip_comp_level    6;</span><br><span class="line">    gzip_buffers       16 8k;</span><br><span class="line"></span><br><span class="line">    gzip_min_length    1000;</span><br><span class="line">    gzip_proxied       any;</span><br><span class="line">    gzip_disable       &quot;msie6&quot;;</span><br><span class="line"></span><br><span class="line">    gzip_http_version  1.0;</span><br><span class="line"></span><br><span class="line">    gzip_types         text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript image/svg+xml;</span><br><span class="line"></span><br><span class="line">    #... ...#</span><br><span class="line"></span><br><span class="line">    include            /home/jerry/www/nginx_conf/*.conf;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="图片优化"><a href="#图片优化" class="headerlink" title="图片优化"></a>图片优化</h2><p>图片格式用 WebP，图片缩放到合适大小，图片用 lazy-load。</p>
<h1 id="参考链接"><a href="#参考链接" class="headerlink" title="参考链接"></a>参考链接</h1><ul>
<li><a target="_blank" rel="noopener" href="https://halfrost.com/ghost_fast/">博客跑分优化</a></li>
<li><a target="_blank" rel="noopener" href="https://blog.fundebug.com/2019/03/07/understand-http2-and-http3/">一文读懂 HTTP/2 及 HTTP/3 特性</a></li>
<li><a target="_blank" rel="noopener" href="https://www.zhihu.com/question/34074946/answer/108588042">HTTP/2 相比 1.0 有哪些重大改进?</a></li>
<li><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/29609078">怎样把网站升级到http/2</a></li>
<li><a target="_blank" rel="noopener" href="https://juejin.im/entry/5981c5df518825359a2b9476">HTTP1.0、HTTP1.1 和 HTTP2.0 的区别</a></li>
<li><a target="_blank" rel="noopener" href="https://www.hi-linux.com/posts/9911.html#%E5%8D%81%E4%BA%8C-%E6%80%A7%E8%83%BD%E6%8F%90%E5%8D%87">Nginx 下实现 HTTP/2 服务器推送 (Server Push) 教程</a></li>
</ul>

    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E5%8D%9A%E5%AE%A2%E4%BC%98%E5%8C%96/" rel="tag"># 博客优化</a>
              <a href="/tags/HTTP2/" rel="tag"># HTTP2</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/03/01/Manjaro%E5%88%A9%E7%94%A8AUR%E8%A3%85%E9%99%8D%E7%BA%A7%E8%BD%AF%E4%BB%B6%E5%8C%85/" rel="prev" title="Manjaro利用AUR装降级软件包">
      <i class="fa fa-chevron-left"></i> Manjaro利用AUR装降级软件包
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/03/03/MD5-SHA-GPG%E5%92%8CPGP/" rel="next" title="MD5,SHA,GPG和PGP">
      MD5,SHA,GPG和PGP <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTP-%E5%8D%8F%E8%AE%AE"><span class="nav-text">HTTP 协议</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTP%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BC%98%E5%8C%96"><span class="nav-text">HTTP的基本优化</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTP-1-x-%E7%9A%84%E7%BC%BA%E9%99%B7"><span class="nav-text">HTTP&#x2F;1.x 的缺陷</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTP-2-%E7%AE%80%E4%BB%8B"><span class="nav-text">HTTP&#x2F;2 简介</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTP2-0%E5%92%8CHTTP1-X%E7%9B%B8%E6%AF%94%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7"><span class="nav-text">HTTP2.0和HTTP1.X相比的新特性</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTP2%E7%9A%84%E5%8D%87%E7%BA%A7%E6%94%B9%E9%80%A0"><span class="nav-text">HTTP2的升级改造</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96SSL%E8%AF%81%E4%B9%A6"><span class="nav-text">获取SSL证书</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%99%E5%9F%9F%E5%90%8D%E6%B7%BB%E5%8A%A0DNS-CAA%E8%AE%B0%E5%BD%95"><span class="nav-text">给域名添加DNS CAA记录</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFCAA"><span class="nav-text">什么是CAA</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9C%A8%E5%9F%9F%E5%90%8D%E7%9A%84DNS%E6%B7%BB%E5%8A%A0CAA"><span class="nav-text">在域名的DNS添加CAA</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Nginx%E4%B8%8A%E9%85%8D%E7%BD%AEHTTP2"><span class="nav-text">Nginx上配置HTTP2</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%88%E6%9E%9C%E5%AF%B9%E6%AF%94"><span class="nav-text">效果对比</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B6%E4%BB%96%E4%BC%98%E5%8C%96"><span class="nav-text">其他优化</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Nginx-%E5%BC%80%E5%90%AF-GZIP"><span class="nav-text">Nginx 开启 GZIP</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9B%BE%E7%89%87%E4%BC%98%E5%8C%96"><span class="nav-text">图片优化</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E9%93%BE%E6%8E%A5"><span class="nav-text">参考链接</span></a></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">fu</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives">
          <span class="site-state-item-count">9</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">9</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">15</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/yourname" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://weibo.com/yourname" title="Weibo → https:&#x2F;&#x2F;weibo.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fab fa-weibo fa-fw"></i>Weibo</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">fu</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://mist.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Mist</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>




  




  
<script src="/js/local-search.js"></script>













  

  

</body>
</html>
